<template>
  <view class="wrapper">
    <view class="content-wrapper content-box">
      <view class="field">
        <view class="field-title">取餐地址: </view>
        <view class="field value">{{ orderInfo.address || "" }}</view>
      </view>
      <view class="field">
        <view class="field-title">付款时间: </view>
        <view class="field value">{{ orderInfo.payTime || "" }}</view>
      </view>
      <view class="field">
        <field class="field-title">商品明细</field>
      </view>
      <view class="products">
        <view class="product-item" v-for="product in (orderInfo.commodities || [])" :key="product.commodityId">
          <view class="product-left">
            <image class="product-logo" :src="product.iconsPic" />
            <view class="product-content">
              <view class="product-title">{{ product.commodityName || "" }}</view>
              <view class="product-count">x{{ product.nums }}</view>
            </view>
          </view>
          <view class="product-price">
              <view class="price">¥ {{ product.discounteds || product.totals }}</view>
              <view class="old-price">¥ {{ product.totals }}</view>
            </view>
        </view>
      </view>
      <view class="footer">
        <view class="desc">合计：</view>
        <view class="amount">¥ {{ orderInfo.totals }}</view>
      </view>
    </view>
  </view>
</template>
<script setup>
  import { ref } from "vue";
  import { onLoad } from "@dcloudio/uni-app";

  const orderId = ref("");
  const orderInfo = ref({});
  const molds = 2;

  const fetchOrderDetail = async () => {
    try {
			const data = await uni.$request.get(uni.$api.orderInfo, {
				data: {
					id: orderId.value,
          molds
				}
			});
			orderInfo.value = data || {};
		} catch (error) {
			console.error("error:", error);
		}
  }

  onLoad((options) => {
    if (options.orderId) {
      orderId.value = options.orderId;
      fetchOrderDetail();
    }
  })


</script>
<style lang="scss" scoped>
  .content-wrapper {
    background-color: #fff;
    padding: 30upx;
    box-sizing: border-box;
    .field {
      padding-left: 30upx;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      .field-title {
        color: #1F1F1F;
        font-size: 28upx;
        font-style: normal;
        font-weight: 400;
        line-height: 40upx;
      }
      .field-value {
        color: #1F1F1F;
        font-size: 28upx;
        font-style: normal;
        font-weight: 700;
        line-height: 34upx;
        margin-left: 40upx;
      }
    }
    .products {
      margin-top: 30upx;
      .product-item {
        display: flex;
        justify-content: space-between;
        margin-top: 24upx;
        &:first-child {
          margin-top: 0;
        }
        .product-left {
          display: flex;
          justify-content: flex-start;
          .product-logo {
            width: 100upx;
            height: 100upx;
            border-radius: 10upx;
          }
          .product-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            margin-left: 20upx;
          }
        }
        .product-price {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .price {
            color: #FF4D56;
            font-size: 28upx;
            font-style: normal;
            font-weight: bold;
            line-height: normal;
          }
          .old-price {
            color: #BEBEBE;
            font-size: 28upx;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-decoration: line-through;
            margin-left: 30upx;
          }
        }
      }
    }
    .footer {
      margin-top: 30upx;
      display: flex;
      justify-content: space-between;
      .desc {
        color: #1F1F1F;
        font-size: 28upx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
      .amount {
        color: #FF4D56;
        font-size: 28upx;
        font-style: normal;
        font-weight: bold;
        line-height: normal;
      }
    }
  }
</style>